<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{ $route.meta.title }}</p></div>
  <div class="ivu-card-body">
    <iForm ref="formRef" :model="formModel" :label-width="100">

      <FormItem label="名称：">{{ name }}</FormItem>

      <FormItem label="描述：">{{ describe }}</FormItem>

      <FormItem v-if="type.toString() === '1'" label="请输入">
        <Input v-model="formModel.value" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
      </FormItem>

      <FormItem v-else-if="type.toString() === '241'" label="请选择">
        <i-select v-model="formModel.value">
          <i-option :key="0" value="0">开启</i-option>
          <i-option :key="1" value="1">关闭</i-option>
        </i-select>
      </FormItem>

      <FormItem>
        <Button type="primary" :loading="submitLoading" @click="onClickSubmit">创建</Button>
        <Button type="ghost" @click="$router.go(-1);">返回</Button>
      </FormItem>
    </iForm>
  </div>
</div>
</template>

<script>
import qs from 'qs';
import { Form, Input, Button, Select, Option, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';

export default {
  components: {
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      token: auth.getToken(),
      name: 'name',
      describe: '',
      type: '',
      formModel: {
        value:'',
      },
      submitLoading: false
    }
  },
  methods: {
    onClickSubmit() {
    	var _this = this;
      ajaxiView.put('/backstage/system/parameter/'+_this.$route.params.key+'?token='+_this.token, qs.stringify(_this.formModel)).then(function(data) {
        if(data !== false) {
          Message.success({
            content: data.msg,
            onClose: function() {
              _this.$router.push({ name: 'systemParameterIndex' });
            }
          });
        }

        _this.submitLoading = false;
      });
    },
    getData() {
      var _this = this;
      ajaxiView.get('/backstage/system/parameter/'+_this.$route.params.key+'?token='+_this.token).then(function(data) {
        if(data !== false) {
          _this.name = data.model.name;
          _this.describe = data.model.describe;
          _this.type = data.model.type;
          _this.formModel.value = data.model.value;
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
}
</script>